<template>
	<view class="login-container">
		<view class="login-box">
			<view class="login-title">绿色低碳登录</view>

			<el-input class="input-field" @blur="inputColor[0]='#666'" @focus="inputColor[0]='#CDDC39'"
				placeholder="请输入您的用户名" v-model="loginForm.username">
				<template #prefix>
					<el-icon :color="inputColor[0]" class="el-input__icon" :size="24">
						<User />
					</el-icon>
				</template>
			</el-input>

			<el-input class="input-field" @blur="inputColor[1]='#8BC34A'" @focus="inputColor[1]='#CDDC39'"
				type="password" placeholder="请输入您的密码" v-model="loginForm.password">
				<template #prefix>
					<el-icon :color="inputColor[1]" class="el-input__icon" :size="24">
						<Lock />
					</el-icon>
				</template>
			</el-input>

			<view class="captcha-section" v-if="captchaEnabled">
				<el-input class="input-field captcha-input" @blur="inputColor[2]='#8BC34A'"
					@focus="inputColor[2]='#CDDC39'" v-model="loginForm.code" type="number" placeholder="请输入验证码"
					maxlength="2">
					<template #prefix>
						<el-icon :color="inputColor[2]" class="el-input__icon" :size="24">
							<Shield />
						</el-icon>

					</template>
					<template #append>
						<el-image :src="codeUrl" @click="getCode" class="captcha-image"></el-image>
					</template>
				</el-input>

				
			</view>

			<button @click="handleLogin" class="login-btn">登录</button>

			<view class="extra-options">
				<text @click="handleRegister" class="option-text">注册账号</text>
				<text @click="handleForgetPassword" class="option-text">忘记密码？</text>
			</view>

			<view class="agreement">
				<text class="agreement-text">登录即代表同意</text>
				<text @click="handleUserAgrement" class="agreement-link">《用户协议》</text>
				<text @click="handlePrivacy" class="agreement-link">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		toRefs
	} from 'vue'
	import {
		getCurrentInstance
	} from 'vue';
	import {
		showConfirm
	} from '@/utils/common'
	import {
		getCodeImg
	} from '@/api/login'
	import {
		userStore
	} from '@/store'


	onMounted(() => {
		getCode()
	})

	import icon from "@/static/images/login/icon.png"

	const inputColor = ref(["#f2be45", "#f2be45", "#f2be45"])
	const loginForm = reactive({
		username: 'admin',
		password: 'admin123',
		code: '',
		uuid: ''
	})
	const globalConfig = getApp().globalData.config

	const codeUrl = ref('')
	const captchaEnabled = ref('')

	const instance = getCurrentInstance()
	const proxy = instance.proxy

	const userEntity = userStore()

	// 隐私协议
	function handlePrivacy() {
		let site = globalConfig.appInfo.agreements[0]
		proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
	}
	// 用户协议
	function handleUserAgrement() {
		let site = globalConfig.appInfo.agreements[1]
		proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
	}

	// 获取图形验证码
	function getCode() {
		getCodeImg().then(res => {
			captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
			if (captchaEnabled) {
				codeUrl.value = 'data:image/gif;base64,' + res.img
				loginForm.uuid = res.uuid
			}
		})
	}


	// 登录方法
	async function handleLogin() {
		if (loginForm.username === "") {
			proxy.$modal.msgError("请输入您的账号")
		} else if (loginForm.password === "") {
			proxy.$modal.msgError("请输入您的密码")
		} else if (loginForm.code === "" && captchaEnabled) {
			proxy.$modal.msgError("请输入验证码")
		} else {
			proxy.$modal.loading("登录中，请耐心等待...")
			pwdLogin()
		}
	}
	// 密码登录
	async function pwdLogin() {

		userEntity.Login(loginForm).then(() => {
			proxy.$modal.closeLoading()
			loginSuccess()
		}).catch(() => {
			if (captchaEnabled) {
				getCode()
			}
		})
	}
	// 登录成功后，处理函数
	function loginSuccess(result) {
		// 设置用户信息
		userEntity.GetInfo().then(res => {
			console.log(res)
			proxy.$tab.reLaunch('/pages/index')
		})
	}
	// 跳转到注册页面
	function handleRegister() {
		console.log('跳转到注册页面');
		uni.navigateTo({
			url: '/pages/register'
		});
	}

	// 跳转到忘记密码页面
	function handleForgetPassword() {
		console.log('跳转到忘记密码页面');
		uni.navigateTo({
			url: '/pages/forget'
		});
	}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  position: relative;
  overflow: hidden;
  padding: 0 20px;

  &::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -50px;
    right: -50px;
    height: 320px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    transform: rotate(-8deg);
    z-index: 0;
    border-bottom-left-radius: 50% 30px;
    border-bottom-right-radius: 50% 30px;
  }
}

.login-box {
  width: 92%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 36px 28px;
  border-radius: 32px;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.08);
  text-align: center;
  position: relative;
  z-index: 1;
}

.login-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 36px;
  color: #065f46;
  position: relative;
  display: inline-block;
  letter-spacing: -0.5px;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    background: #059669;
    border-radius: 4px;
  }
}

.input-field {
  margin-bottom: 24px;
  border-radius: 16px;
  height: 56px;
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
  
  :deep(.el-input__wrapper) {
    background-color: rgba(236, 253, 245, 0.4);
    box-shadow: none !important;
    padding: 0 16px;
    height: 56px;
    
    &:focus-within {
      background-color: rgba(209, 250, 229, 0.4);
    }
  }
  
  :deep(.el-input__inner) {
    height: 56px;
    font-size: 16px;
    color: #065f46;
  }
}

.captcha-section {
  margin-bottom: 28px;
  position: relative;
  height: 56px;
}

.captcha-input {
  width: 100%;
  margin-bottom: 0;
  
  :deep(.el-input__wrapper) {
    padding-right: 130px; // 为验证码图片留出空间
  }
}

.captcha-image {
  position: absolute;
  right: 0;
  top: 0;
  height: 56px;
  width: 120px;
  border-radius: 0 16px 16px 0;
  cursor: pointer;
  object-fit: cover;
  z-index: 2;
  border-left: 1px solid rgba(209, 250, 229, 0.6);
}

.login-btn {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: white;
  font-size: 18px;
  font-weight: 500;
  margin-top: 6px;
  margin-bottom: 28px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
  
  &:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
  }
}

.extra-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  padding: 0 10px;
}

.option-text {
  color: #059669;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  
  &:active {
    color: #047857;
  }
}

.agreement {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  
  .agreement-text {
    margin-right: 4px;
  }
  
  .agreement-link {
    color: #059669;
    cursor: pointer;
    margin: 0 3px;
    -webkit-tap-highlight-color: transparent;
    
    &:active {
      color: #047857;
    }
  }
}

/* 修复Element Plus在iOS上的样式问题 */
:deep(.el-input__icon) {
  line-height: 56px;
  color: #10b981 !important;
}
</style>
